<template>
  <el-dialog title="选择所在位置" :visible.sync="visible" :close-on-click-modal="false">
    <el-input clearable  class='r-result' size="small" type="text" placeholder="请输入公司地址" id="suggestId"  style="width:300px;" v-model="inputKey"/></el-input>
    <div class="nav">
      <p>{{dataForm.formattedAddress}}</p>
      <div>
        <el-button type="primary" @click.stop="confirm">确定</el-button>
        <el-button @click.stop="visible=false">取消</el-button>
      </div>
    </div>
    <div id="map" class="map"></div>
  </el-dialog>
</template>

<script>
import BMap from 'BMap'
  export default {
    name: "selectMapContainer",
    data() {
      return {
        visible: false,
        map:null,
        location:null,
        poi:{},
        curPoint: {},
        inputKey:'',
        dataForm:{
          longitude:'',
          latitude:'',
          formattedAddress:''
        }
      }
    },
    methods:{
      init(locationInfo){
        this.visible = true
        this.$nextTick(()=>{
          this.initMap(locationInfo)
        })
      },

      initMap(locationInfo){
        let _this=this
        this.map= new BMap.Map('map');
        this.map.addControl(new BMap.NavigationControl());
        this.map.addControl(new BMap.ScaleControl());
        this.map.setDefaultCursor("crosshair");
        this.getLocation(locationInfo,(data)=>{
          let point = new BMap.Point(data.point.lng,data.point.lat);
          this.dataForm.longitude=data.point.lng
          this.dataForm.latitude=data.point.lat
          this.map.centerAndZoom(point,15)
          var myIcon = new BMap.Icon(require("@/assets/img/dingwei.png"), new BMap.Size(40, 40), {
            offset: new BMap.Size(0, -40), // 指定定位位置
          });
          var marker=new BMap.Marker(point,{icon:myIcon});
          // let marker = new BMap.Marker(point)
          this.map.addOverlay(marker)
          var ac = new BMap.Autocomplete(
            //建立一个自动完成的对象
            {
              "input": 'suggestId'
              , "location":  this.map
            }
          )
          var myValue
          ac.addEventListener("onconfirm", function (e) {
            //鼠标点击下拉列表后的事件
            var _value = e.item.value; //获取选中的地址信息
            myValue = _value.province + _value.city + _value.district + _value.street + _value.business; //拼接成具体地址
            _this.dataForm.formattedAddress= myValue
            _this.inputKey=''
            setPlace()
          });

          this.map.addEventListener("click", function(e){   //点击事件
            _this.map.clearOverlays();
            if(!e.overlay){
              var myIcon = new BMap.Icon(require("@/assets/img/dingwei.png"), new BMap.Size(40, 40), {
                offset: new BMap.Size(0, -40), // 指定定位位置
              });
              var marker=new BMap.Marker(e.point,{icon:myIcon});
              _this.map.addOverlay(marker);
              _this.getAddrByPoint(e.point)
            }
          });

          function setPlace() {
            _this.map.clearOverlays();    //清除地图上所有覆盖物
            function myFun() {
              if(local.getResults().getPoi(0)) {
                _this.curPoint = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                _this.dataForm.longitude=_this.curPoint.lng
                _this.dataForm.latitude=_this.curPoint.lat
                _this.map.centerAndZoom(_this.curPoint, 15);
                var myIcon = new BMap.Icon(require("@/assets/img/dingwei.png"), new BMap.Size(40, 40), {
                  offset: new BMap.Size(0, -40), // 指定定位位置
                });
                var marker=new BMap.Marker(_this.curPoint,{icon:myIcon});
                _this.map.addOverlay(marker);    //添加标注
              }else {}
            }
            var local = new BMap.LocalSearch(_this.map, { //智能搜索
              onSearchComplete: myFun
            });
            local.search(myValue);
          }
        })
      },
      getLocation(locationInfo,callback){
        let _this=this
        if(locationInfo){
          _this.dataForm.formattedAddress=locationInfo.formattedAddress
          _this.dataForm.longitude=locationInfo.point.lng
          _this.dataForm.latitude=locationInfo.point.lat
          callback(locationInfo)
        }
        else {
          var geolocation = new BMap.Geolocation();
          geolocation.getCurrentPosition(function(res){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
              _this.getAddrByPoint(res.point,callback)
            }
          },{enableHighAccuracy: true})
        }
      },

      getAddrByPoint(point,callback){
        var that = this;
        var geco = new BMap.Geocoder();
        geco.getLocation(point, function(res){
          console.log(res)  //内容见下图
          that.dataForm.formattedAddress=res.surroundingPois.length>0?res.surroundingPois[0].address + res.surroundingPois[0].title:res.address
          that.dataForm.longitude=res.point.lng
          that.dataForm.latitude=res.point.lat
          if(callback){
            callback(res)
          }
        },{ enableHighAccuracy: true })
      },
      confirm(){
        this.visible=false
        this.$emit('selectLocation',this.dataForm)
      }
    }
  }
</script>

<style>
/* 关键字下拉框 */
.tangram-suggestion-main {
  z-index: 9999 !important;
}
</style>

<style lang="scss" scoped>
  .nav{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: 20px;
    p{
      flex: 1;
    }
  }
  .map{
    height: 400px;
    width: 100%;
  }


  .r-result {

  }
</style>
